<template>
  <view style="height: 100%">
<!--    <view class="inp">-->
<!--      <u-search-->
<!--        :show-action="false"-->
<!--        placeholder="搜索城市/区县/地点"></u-search>-->
<!--    </view>-->
<!--    <view class="diTop">-->
<!--      <view class="flex at f14 c3">-->
<!--        <image-->
<!--          src="../../../../static/ding.png"-->
<!--          mode=""-->
<!--          class="dwP"-->
<!--          mode="widthFix"></image>-->
<!--        <view class="foText">-->
<!--          当前选择：-->
<!--          <text>北京市第一中学</text>-->
<!--        </view>-->
<!--      </view>-->
<!--      <view class="ml flex at f12">-->
<!--        <image-->
<!--          src="../../../../static/zhuan.png"-->
<!--          mode=""-->
<!--          class="qhP"-->
<!--          mode="widthFix"></image>-->
<!--        <view class="chect">刷新定位</view>-->
<!--      </view>-->
<!--    </view>-->

    <view class="flex at acvitex">
      <view class="TuiJ">
        <view
          v-for="(item, index) in listchMu"
          :key="index"
          :class="active === index ? 'acvie' : 'acvi'"
          @click="leftClickHandle(index, item.id,item.name)">
          <view class="acvi1"></view>
          <text class="tress">
            {{ item.name }}
          </text>
        </view>
      </view>
      <view style="width: 60%;">
        <view>
          <view class="quBox">
	          <view class="quBox_l minBox">
		          <view class="quBox_text" v-for="(item, index) in newmapProvience"  :class="provienceActive === index ? 'active' : ''" :key="index"  @click="rightprovicenClickHandle(index, item.id,item.name)">{{item.name}}</view>
	          </view>
            <view class="quBox_l minBox">
			  <view class="quBox_text" v-for="(item, index) in newmapCity"  :class="cityActive === index ? 'active' : ''" :key="index"  @click="rightcityClickHandle(index, item.id,item.name)">{{item.name}}</view>
            </view>
            <view class="quBox_r minBox">
              <view class="quBox_text" v-for="(item, index) in newareaDataCity"  :class="countyActive === index ? 'active' : ''" :key="index"  @click="rightcountyClickHandle(index, item.id,item.name)">{{item.name}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
   import http from "@/shopro/request/index.js";
	export default {
		data() {
			return {
				leftMenuList: [],
				//选择的状态
				active: "",
				provienceActive:"",
				cityActive:"",
				countyActive:"",
				newmapProvience:[],
                listchMu:[],
				mapCity:[],
				areaDataCity :[],
				countys_id:'',
				provicen_id:'',
				city_id:'',
				county_id:'',
				countys_name:'',
				provicen_name:'',
				city_name:'',
				county_name:'',
				newmapCity:[],
				newareaDataCity:[]
			}
		},
		watch:{
			active(val,old){
				let arr = [];
				this.newmapProvience = [];
				this.newmapCity = [];
				this.newareaDataCity = [];
				this.countys_name = this.listchMu[val].name;
				if(this.listchMu[val].child.length>0){
					arr = this.listchMu[val].child
					this.newmapProvience = arr;
					this.provicen_pid = this.newmapProvience[0].id
					this.provicen_name = this.newmapProvience[0].name;
				}
				this.provienceActive = 0;
				this.cityActive = 0;
				this.countyActive = 0;
				if(this.newmapProvience[0].child.length>0){
					this.newmapCity = this.newmapProvience[0].child;
					this.city_name = this.newmapCity[0].name;
				}
				if(this.newmapCity[0].child.length>0){
					this.newareaDataCity = this.newmapCity[0].child;
					this.county_name = this.newareaDataCity[0].name;
				}
				console.log(val,"省份====",this.newmapProvience)
			},
			provienceActive(val,old){
				if(val!=""||val==0){
					let arr = [];
					this.newmapCity = [];
					this.newareaDataCity = [];
					if(this.newmapProvience[val].child.length>0){
						arr = this.newmapProvience[val].child
						this.newmapCity = arr;
						this.city_pid = this.newmapCity[0].id;
						this.city_name = this.newmapCity[0].name;
						console.log(val,"城市====",this.newmapCity)
					}
					this.cityActive = 0;
					this.countyActive = 0;
					if(this.newmapCity[0].child.length>0){
						this.newareaDataCity = this.newmapCity[0].child;
						this.county_name = this.newareaDataCity[0].name;
					}
				}
			},
			cityActive(val,old){
				if(val!=""||val==0){
					this.newareaDataCity = [];
					if(this.newmapCity[val].child.length>0){
						this.newareaDataCity = this.newmapCity[val].child;
						this.county_pid = this.newareaDataCity[0].id
						this.county_name = this.newareaDataCity[0].name;
					}
					this.countyActive = 0;
					console.log(val,"县区====",this.newareaDataCity)
				}
			}
		},
		onLoad(){
			this.getArea()
		},
		methods: {
			leftClickHandle(index,id, name) {
				this.provienceActive = 0;
				this.cityActive   = 0;
				// this.countyActive = 0;
				this.countys_name = name;
				this.provicen_name = '';
				this.city_name = '';
				// this.county_name = '';
				console.log("-=====", name)
				this.active       = index;
				
			},
			rightprovicenClickHandle(index,id, name) {
				console.log("-=====", name)
				this.cityActive   = 0;
				// this.countyActive = 0;
				this.provicen_name =name;
				this.city_name = '';
				// this.county_name = '';
				this.provienceActive = index;
				
			},
			rightcityClickHandle(index,id, name) {
				this.countyActive = 0;
				console.log("-=====", name)
				this.city_name = name;
				this.county_name = '';
				this.cityActive   = index;
			},
			rightcountyClickHandle(index,id, name) {
				console.log("-=====", name)
				this.countyActive = index;
				this.county_name = name;
				uni.setStorageSync("cityData",this.countys_name+this.provicen_name+this.city_name+this.county_name)
				uni.setStorageSync("active",this.active);
				uni.setStorageSync("cityName",this.city_name);
				uni.setStorageSync("provienceActive",this.provienceActive);
				uni.setStorageSync("countyActive",this.countyActive);
				uni.setStorageSync("cityActive",this.cityActive);
				uni.setStorageSync("countyId", id);
				uni.removeStorageSync("areacity");
				uni.navigateTo({
					url:`/pages/index/city_path/project_city?id=${id}`,
				})
			},
			// 获取省市区
			getArea() {
				// http("address.area").then((res) => {
				// 	console.log(res,999999999999999)
				// 		this.listchMu = res.data.provinceData;
				// 		this.mapCity = res.data.cityData;
				// 		this.areaDataCity = res.data.areaData;
				// 		this.provicen_pid = this.listchMu[0].value;
				// 	console.log(res.data.cityData[0],res.data.areaData[0],999999999999999)
				// 	})
				this.$new_http("address.areaIndex").then(res => {
					console.log('====', res)
					this.listchMu = res.data;
					this.active = 0
					if(this.listchMu[0].child){
						this.newmapProvience= this.listchMu[0].child;
						if(this.listchMu[0].child[0].child){
							this.newmapCity= this.listchMu[0].child[0].child;
							if(this.listchMu[0].child[0].child[0].child){
								this.newareaDataCity = this.listchMu[0].child[0].child[0].child
							}
						}
					}
					console.log('====this.listchMu', this.listchMu);
					console.log('====this.newmapProvience', this.newmapProvience);
					console.log('====this.mapCity', this.newmapCity);
					console.log('====this.areaDataCity', this.newareaDataCity);
				})
			}
		}
		
	}
</script>

<style lang="scss">
page {
  height: 100%;
}

.quBox {
  display: flex;
  background-color: #fff;
	width: 100%;
  .quBox_l {
    width: 50%;
	  padding-left: 10rpx;
    .quBox_text {
	    height: 88rpx;
	    text-align: center;
	    font-family: PingFangSC, PingFang SC;
	    font-weight: 400;
	    font-size: 28rpx;
	    color: #333;
	    text-align: left;
	    display: flex;
	    align-items: center;
    }
    .active {
      color: #ed861f;
      background: #f7f7f7;
    }
  }

  .quBox_r {
    width: 302rpx;
	  padding-left: 10rpx;
    .quBox_text {
      height: 88rpx;

      text-align: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #333;
      line-height: 88rpx;
      text-align: center;
    }
	  .active {
		  color: #ed861f;
		  background: #f7f7f7;
	  }
  }
}

.inBox {
  .TinBox {
    margin-bottom: 28rpx;
    width: 492rpx;
    height: 136rpx;
    background: #f5f5f5;
    border-radius: 12rpx;
    display: flex;
    justify-content: space-between;
    padding-left: 8rpx;

    .TinBoxL {
      margin-top: 8rpx;
      margin-right: 20rpx;

      .TinBoxLImg {
        width: 146rpx;
        height: 120rpx;
      }
    }

    .TinBoxR {
      width: 100%;

      .TinBoxT {
        margin-top: 20rpx;
        display: flex;
        justify-content: space-between;

        .TinBoxT_l {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
        }

        .TinBoxT_R {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #666666;
          margin-right: 24rpx;
        }
      }

      .TinBoxB {
        margin-top: 20rpx;
        display: flex;

        .TinBoxBImg {
          width: 20rpx;
          height: 23rpx;
          margin-top: 5rpx;
        }

        .TinBoxB_r {
          margin-left: 12rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
        }
      }
    }
  }
}
.active {
	color: #ed861f;
	background: #f7f7f7;
}
.minBox {
	height: 100vh;
	overflow-y: scroll;
}

.tabs {
  display: flex;
  /* flex: 1; */
  justify-content: flex-start;
  flex-wrap: wrap;
}

.tabsText {
  width: 140rpx;
  height: 52rpx;
  background: #f5f5f5;
  border-radius: 26rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  line-height: 52rpx;
  margin: 24rpx 2%;
  text-align: center;
  font-style: normal;
}

.inp {
  background-color: #fff;
  padding: 0 30rpx 30rpx;
}

.TuiJ {
  width: 40%;
  height: 100vh;
  background: #f5f5f5;
	overflow-y: scroll;
}

.diTop {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  margin-top: 12rpx;
  padding: 34rpx 30rpx 0;
  height: 108rpx;
}

.chect {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #ed861f;
  line-height: 33rpx;
  text-align: center;
}

.foText {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  line-height: 40rpx;
  text-align: left;
  font-style: normal;
  margin-left: 6rpx;
}

.dwP {
  width: 28rpx;
  height: 28rpx;
  margin-top: 5rpx;
}

.qhP {
  width: 28rpx;
  height: 28rpx;
  margin-right: 8rpx;
  margin-top: 5rpx;
}

.acvitex {
  height: calc(100% - 104px);
  background: #fff;
  width: 100%;
}

.acvi,
.acvie {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  position: relative;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  margin-top: 40rpx;
}

.tress {
  margin-left: 54rpx;
  text-align: left;
}

.acvie {
  color: #ed861f;
}

.acvi1 {
  width: 4rpx;
  height: 16rpx;
  background-color: #ed861f;
  position: absolute;
  top: 13rpx;
  left: 35rpx;
}

.acvi1::before {
  width: 4rpx;
  height: 16rpx;
  background-color: #f5f5f5;
}
</style>